<template>
    <div class="score-wrapper">
      <!-- 烟花图标容器 (固定在左侧) -->
      <div class="fireworks-badge" v-if="fireworkCount > 0">
        <div 
          v-for="n in fireworkCount" 
          :key="n"
          class="firework-icon"
          @click="useFirework"
          @mouseenter="hoverFirework = n"
          @mouseleave="hoverFirework = null"
        >
          <span v-if="hoverFirework === n">🎆</span>
          <span v-else>🎇</span>
          <span class="firework-cost">-100</span>
        </div>
      </div>
      
      <!-- 积分容器 -->
      <div class="score-container">
        <div class="score-icon">🌟</div>
        <div class="score-value">{{ animatedScore }}</div>
        <div 
          class="score-change" 
          :class="{ negative: scoreChange < 0 }"
          v-if="showScoreChange"
        >
          {{ scoreChange > 0 ? '+' : '' }}{{ scoreChange }}
        </div>
      </div>
    </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";

const props = defineProps({
  initialScore: {
    type: Number,
    default: 0
  },
  triggerValue: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['scoreUpdated', 'fireworkTriggered']);

// 积分系统
const baseScore = ref(props.initialScore);
const displayScore = ref(props.initialScore);
const scoreChange = ref(0);
const showScoreChange = ref(false);
const hoverFirework = ref(null);

// 音频元素
const scoreAudio = ref(null);

onMounted(() => {
  // 创建音频元素
  scoreAudio.value = new Audio();
  // 你可以替换为你的音频文件路径
  scoreAudio.value.src = '/sounds/score.mp3';
  scoreAudio.value.preload = 'auto';
});

// 计算属性
const animatedScore = computed(() => Math.floor(displayScore.value));
const fireworkCount = computed(() => Math.floor(baseScore.value / 100));

// 使用烟花
function useFirework() {
  if (baseScore.value < 100) return;
  
  baseScore.value -= 100;
  displayScore.value = baseScore.value;
  emit('fireworkTriggered');
  
  scoreChange.value = -100;
  showScoreChange.value = true;
  setTimeout(() => {
    showScoreChange.value = false;
  }, 3000);
}

// 监听触发值变化
watch(() => props.triggerValue, (newVal, oldVal) => {
  if (newVal > oldVal) {
    addScore(20);
  } else if (newVal < oldVal) {
    resetScore();
  }
});

// 添加分数
function addScore(amount) {
  scoreChange.value = amount;
  showScoreChange.value = true;
  
  // 播放音效（仅在分数增加时）
  if (amount > 0 && scoreAudio.value) {
    scoreAudio.value.currentTime = 0; // 重置播放位置
    scoreAudio.value.play().catch(e => console.log('Audio play failed:', e));
  }
  
  const targetScore = baseScore.value + amount;
  const duration = 1000;
  const startTime = Date.now();
  
  function updateScore() {
    const elapsed = Date.now() - startTime;
    const progress = Math.min(elapsed / duration, 1);
    displayScore.value = baseScore.value + amount * progress;
    
    if (progress < 1) {
      requestAnimationFrame(updateScore);
    } else {
      baseScore.value = targetScore;
      emit('scoreUpdated', targetScore);
      setTimeout(() => {
        showScoreChange.value = false;
      }, 3000);
    }
  }
  
  updateScore();
}

// 重置分数
function resetScore() {
  baseScore.value = 0;
  displayScore.value = 0;
  showScoreChange.value = false;
  emit('scoreUpdated', 0);
}

defineExpose({
  addScore,
  resetScore
});
</script>

<style scoped>
/* 外层包装 */
.score-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 烟花徽章容器 */
.fireworks-badge {
  display: flex;
  align-items: center;
  background: rgba(255, 215, 0, 0.15);
  border-radius: 50px;
  padding: 5px 10px 5px 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* 烟花图标样式 */
.firework-icon {
  position: relative;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: -8px; /* 让图标部分重叠 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.firework-icon:first-child {
  margin-left: 0;
}

.firework-icon:hover {
  transform: scale(1.3) translateY(-3px);
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7));
  z-index: 1;
}

/* 烟花消耗提示 */
.firework-cost {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: bold;
  color: #e74c3c;
  opacity: 0;
  transition: opacity 0.3s;
}

.firework-icon:hover .firework-cost {
  opacity: 1;
}

/* 积分容器 */
.score-container {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 15px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

/* 积分图标 */
.score-icon {
  font-size: 24px;
  margin-right: 8px;
  animation: pulse 2s infinite;
}

/* 积分值 */
.score-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  min-width: 40px;
  text-align: center;
}

/* 分数变化提示 */
.score-change {
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #4CAF50;
  animation: 
    slideUp 0.5s ease-out forwards,
    fadeOut 0.5s ease-out 2.5s forwards;
}

.score-change.negative {
  color: #e74c3c;
}

/* 动画效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 烟花图标动画 */
@keyframes fireworkGlow {
  0% { filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3)); }
  50% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7)); }
  100% { filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3)); }
}

.firework-icon {
  animation: fireworkGlow 3s infinite;
}

.firework-icon:nth-child(2n) {
  animation-delay: 0.5s;
}

.firework-icon:nth-child(3n) {
  animation-delay: 1s;
}
</style>